import React, { useEffect, useState, useRef } from "react"
import "./style.less"
import { DotLoading } from 'antd-mobile'

const LoadMore = (props) => {

    const more = useRef();
    let timer = props.timer;
    /**
     * 浅比较
     */
    useEffect(() => {
        // getBoundingClientRect
        // 视口高度

        let winHeight = document.documentElement.clientHeight;
        window.addEventListener("scroll", scorllHandle)
        function scorllHandle() {
            console.log(45)
            if (more.current) {
                if (winHeight > more.current.getBoundingClientRect().top+10 && timer === true) {
                    timer = false;
                    setTimeout(() => {
                        props.onLoadMore()
                    }, 1000);
                }
            }

        }
        return () => {
            window.removeEventListener("scroll", scorllHandle)
        }
    }, [props.onLoadMore])

    return (
        <div className="load" ref={more}>
            <DotLoading/>
        </div>
    )
}

export default LoadMore